<template>
  <mt-tabbar class="bottom-nav" v-model="selected" fixed>
    <mt-tab-item :id="item.text" v-for="(item, index) in navData" :key="index" @click.native="changeNav(item)">
      <i class="iconfont" :class="item.icon"></i>
      <p style="margin-top:5px">{{item.text}}</p>
    </mt-tab-item>
  </mt-tabbar>
</template>

<script>
  export default {
    data() {
      return {
        selected: '',
        navData: this.$store.state.navData
      }
    },
    methods: {
      changeNav: function (item) {
        this.$router.push({name: item.link})
        this.$store.commit('changeTitle', item.headtitle)
      }
    },
    mounted: function () {
      var path = this.$route.path
      for (var i = 0; i < this.navData.length; i++) {
        if (path === '/' + this.navData[i].link) {
          this.selected = this.navData[i].text
          this.$store.commit('changeTitle', this.navData[i].headtitle)
        }
      }
    }
  }
</script>

<style scoped>
  .mint-tabbar{
    background-color: #fff
  }
  .mint-tabbar > .mint-tab-item.is-selected{
    background: #fff
  }
  .bottom-nav{
    color:#999;
    padding: 0.1rem 0;
    border-top:#e5e5e5 solid 1px;
  }
</style>